//
// Popovers
// --------------------------------------------------

.@{ns}popover {
  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  .reset-text();
  .drop-shadow(0 1px 8px rgba(0, 0, 0, .12));

  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindex-popover;
  display: none;
  padding: 12px;
  font-size: @font-size-base;
  background-color: @popover-bg;
  background-clip: padding-box;
  border-radius: @popover-border-radius;
  opacity: 0;

  &.fade {
    transition: opacity .1s linear, transform .1s ease-out;
  }

  &.in {
    opacity: 1;
    transition: opacity .15s linear .2s, transform .15s ease-in .2s;
  }

  // .arrow is outer, .arrow:after is inner
  > .arrow {
    border-width: @popover-arrow-outer-width;

    &,
    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    &::after {
      border-width: @popover-arrow-width;
      content: "";
    }
  }

  // Popover Title
  .@{ns}popover-title {
    margin: 0; // reset heading margin
    font-size: @font-size-base;
    line-height: @line-height-base;
  }

  // Popover Content
  .@{ns}popover-content {
    margin-top: 8px;
    font-size: @font-size-small;
    line-height: @line-height-small;
  }
}

// Offset the popover to account for the popover arrow
.@{ns}popover-placement-top-left,
.@{ns}popover-placement-top-right,
.@{ns}popover-placement-top {
  margin-top: -@popover-arrow-width;
  .set-translate(0, -@popover-translate-distance);

  > .arrow {
    margin-left: -@popover-arrow-outer-width;
    border-bottom-width: 0;
    bottom: -@popover-arrow-outer-width;

    &::after {
      bottom: 1px;
      margin-left: -@popover-arrow-width;
      border-bottom-width: 0;
      border-top-color: @popover-arrow-color;
    }
  }
}

.@{ns}popover-placement-right-top,
.@{ns}popover-placement-right-bottom,
.@{ns}popover-placement-right {
  margin-left: @popover-arrow-width;
  .set-translate(@popover-translate-distance, 0);

  > .arrow {
    left: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;
    border-left-width: 0;

    &::after {
      left: 1px;
      bottom: -@popover-arrow-width;
      border-left-width: 0;
      border-right-color: @popover-arrow-color;
    }
  }
}

.@{ns}popover-placement-bottom-left,
.@{ns}popover-placement-bottom-right,
.@{ns}popover-placement-bottom {
  margin-top: @popover-arrow-width;
  .set-translate(0, @popover-translate-distance);

  > .arrow {
    margin-left: -@popover-arrow-outer-width;
    border-top-width: 0;
    top: -@popover-arrow-outer-width;

    &::after {
      top: 1px;
      margin-left: -@popover-arrow-width;
      border-top-width: 0;
      border-bottom-color: @popover-arrow-color;
    }
  }
}

.@{ns}popover-placement-left-top,
.@{ns}popover-placement-left-bottom,
.@{ns}popover-placement-left {
  margin-left: -@popover-arrow-width;
  .set-translate(-@popover-translate-distance, 0);

  > .arrow {
    right: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;
    border-right-width: 0;

    &::after {
      right: 1px;
      border-right-width: 0;
      border-left-color: @popover-arrow-color;
      bottom: -@popover-arrow-width;
    }
  }
}

.@{ns}popover-placement-bottom,
.@{ns}popover-placement-top {
  > .arrow {
    left: 50%;
  }
}

.@{ns}popover-placement-bottom-right,
.@{ns}popover-placement-top-right {
  > .arrow {
    right: @popover-arrow-gap;
  }
}

.@{ns}popover-placement-left,
.@{ns}popover-placement-right {
  > .arrow {
    top: 50%;
  }
}

.@{ns}popover-placement-left-bottom,
.@{ns}popover-placement-right-bottom {
  > .arrow {
    bottom: @popover-arrow-gap;
  }
}

